
<script setup>

import Avatar from '../../components/upavatar.vue'
import { findUserAPI } from '@/apis/home'
import { ref, onMounted ,reactive} from 'vue'
import { updateUserAPI } from '@/apis/home'
import {uppsdAPI} from '@/apis/user'
import { getIdentifyAPI} from '@/apis/user'
    const uname = ref('')
    const avatar = ref('')
    const intro = ref('')
    const gender = ref('')
    const area = ref('')
    const uemail = ref('')
    const editing = ref('')
    const ucode = ref('')
    const form = ref({
      uppassword:'',
      upconfirm:''
    })
const sms = reactive({
   disabled:false,
   total:60,
   count:0
  })
  const dialogFormVisible = ref(false)
 
    const uprules = ref({
      uppassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { max: 14, min: 6, message: '密码长度为6-14', trigger: 'blur' }
      ],
      upconfirm: [
        {
          required: true,
          message: '请再次输入密码',
          trigger: 'blur'
        },
        {
          validator: (rule, value, callback) => {
            if (value != form.value.uppassword) {
              callback(new Error('两次密码输入不一致'))
            } else {
              callback()
            }
          }, 
          trigger: 'blur'
        }
      ]
    })
    const upformRef = ref(null)
 
    const getUserInfo = () => { 
       
      findUserAPI().then(res => {
        uname.value = res.data.data.name
        avatar.value = res.data.data.avatar
        uemail.value = res.data.data.email
        gender.value = res.data.data.sex
        intro.value = res.data.data.describe
        area.value = res.data.data.address
      })
    }

    onMounted(() => {
      getUserInfo()
    })

    const updateInfo = async() => {
      await updateUserAPI(avatar.value,uname.value,gender.value,area.value,intro.value)
      // 在这里写更新信息的操作，可以将修改后的信息传给后端或者本地存储
      // 然后关闭编辑模式
      editing.value = false
    }
    
    const UpdatePsd = () => {
      let password = form.value.uppassword
      // console.log(uemail._value)
      let email = uemail._value
      let code = ucode._value
      console.log(email,password,code)
      
      upformRef.value.validate(async valid => {
        if (valid) {
          let response = await uppsdAPI({ email, password,code})
          if (response.success == true) {
            ElMessage({ type: 'success', message: '修改成功' })
            //router.replace({ path: '/login' })
            location.reload()
          } else {
            ElMessage({ type: 'warning', message: response.message })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

   
  async function getIdentifyCode(email, form) {
  // 提交表单验证
  const valid = await form.validate()

  if (valid) {
    try {
      // 发送验证码操作
      
      await getIdentifyAPI({email});
      ElMessage({ type: 'success', message: '验证码发送成功' });

      // 启用计时器
      sms.count = sms.total
      sms.disabled = true
      let timer = setInterval(() => {
        if (sms.count > 1 && sms.count <= sms.total) {
          sms.count--
        } else {
          sms.disabled = false
          clearInterval(timer)
        }
      }, 1000)
    } catch (error) {
      console.error(error);
      ElMessage({ type: 'error', message: '验证码发送失败' });
    }
  } else {
    // 表单验证不通过，提示错误信息
    ElMessage({ type: 'warning', message: '请正确填写信息后再操作' });
  }
}
  
    const uploadImg = (imgUrl)=> {
      // 在这里处理接收到的子组件传递的值
      avatar.value = imgUrl
      
      console.log('接收到头像URL:', imgUrl)
    }
  
</script>

<template>
  <div class="app-per">
    <div v-if="!editing" class="person">
      <h1>🤵 个人信息</h1>
      <el-avatar :size="150" :src="avatar" />
      <p>昵称：{{ uname }}</p>
      <p>邮箱: {{ uemail }}</p>
      <p>性别：{{ gender }}</p>
      <p>简介：{{ intro }}</p>
      <p>地区：{{ area }}</p>
      <el-button type="primary" size="large" @click="editing = true">修改信息</el-button>
    </div>
    <div v-else class="update">
              <el-button class="uppsd" text @click="dialogFormVisible = true"> 
                修改密码
              </el-button>
              <el-dialog v-model="dialogFormVisible" title="修改密码">
              <el-form
              ref="upformRef"
              :model="form"
              :rules="uprules"
              label-position="right"
              label-width="100px"
              status-icon
              class="el_form"
              hide-required-asterisk="false"
            >
              <el-form-item prop="uppassword" label="新密码" >
                <el-input v-model="form.uppassword" type="text" />
              </el-form-item>
              <el-form-item  prop="upconfirm"  label="确认密码" >
                <el-input v-model="form.upconfirm" type="text" />
              </el-form-item>
              <el-form-item prop="ucode" label="验证码">
              <el-input
                type="text"
                v-model="ucode"
                class="inpWidth"
              />
              <el-button v-if="!sms.disabled" type="primary"  @click="getIdentifyCode(uemail,upformRef)">
                 发送验证码
              </el-button>
              <el-button v-else type="primary" style="color:black" disabled >
                 {{ sms.count }} 秒后重新发送
              </el-button>
         
          </el-form-item> 
             
              <el-button size="large" class="subBtn" @click="UpdatePsd">
                确认修改
              </el-button>
             
            </el-form>
                
          </el-dialog>
      <h1>修改个人信息</h1>
      <Avatar class="upava" @uploadImg="uploadImg" :url="avatar"/>
   
      <!-- <el-avatar :size="150" :src="avatar" />
      <br>
      <el-button class="touxiang" type="primary" size="large">修改头像</el-button> -->
      <label for="uname">姓名: </label>
      <input v-model="uname" id="uname" type="text"><br>
      <label for="intro" class="intro">简介: </label>
      <textarea v-model="intro" id="intro"></textarea><br>
      <label for="gender">性别: </label>
      <select v-model="gender" id="gender">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="保密">保密</option>
      </select><br>
      <label for="area" class="area">地区: </label>
      <input v-model="area" id="area" type="text"><br>
      
      <el-button type="primary" size="large" @click="updateInfo">保存</el-button>
      <el-button type="primary" size="large" @click="editing = false">取消</el-button>
    </div>
  </div>
</template>

<style scoped>
.app-per {
  width: 600px;
  height: 650px;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.1), -5px -5px 10px rgba(255,255,255,0.5);
  background-image: url(../../assets/img/mx.jpg);
  background-size: cover;
  background-position: 120px -80px;
  position: relative;
  color: #333;
  text-align: center;
  padding: 30px;

}
h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.person p {
  font-size: 20px;
  margin: 10px;
}


label {
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 10px;
}
#intro{
  vertical-align: middle;
}

input[type=text],
textarea,
select {
  font-size: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
  margin-bottom: 20px;
  resize: none;
  outline: none;
}
.person .el-button{
  margin-top: 30px;
}
.update{
  position: relative;
}
.touxiang {
  position: absolute;
  top:120px;
  left: 360px;
}
.upava {
  margin-bottom: 10px;
}
.uppsd {
  position: absolute;
  top:10px;
  right: 20px;
  font-size: 20px;
}
.inpWidth{
  margin-bottom: 10px;
}
</style>

